<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的常用事件</title>

    <style>
        input {
            width: 250px;
            height: 60px;
        }
        
        #mouseDiv {
            border: blue solid 1px;
            height: 100px;
            width: 300px;
            background-color: blueviolet;
        }
    </style>
</head>
<!-- 
    load事件：-写在body中
        1.load事件不是在页面加载过程中触发的。
        2.load事件是在页面中所有的元素全部加载完毕之后才发生的。

 -->

<body onload="console.log('页面加载完毕了！')">
    <!-- 
        JS的常用事件:
        (1) blur               失去焦点
        (2) focus              获得焦点

        (3) click              鼠标单击
        (4) dblclick           鼠标双击

        (5) keydown            键盘按下
        (6) keyup              键盘弹起

        (7) mousedown          鼠标按下
        (8) mouseover          鼠标经过
        (9) mousemove          鼠标移动
        (10) mouseout          鼠标离开
        (11) mouseup           鼠标弹起
        
        (12) submit            表单提交
        (13) reset             表单重置

        (14) select            文本被选定 
        (15) change            下拉列表选中项改变,或文本框内容改变
        (16) load              页面加载完毕
        
    提醒:任何一个事件都有对应的事件句柄。事件句柄是在事件名称前添加on就行。
 -->
    测试选中文本事件:
    <textarea rows="10" cols="30" onselect="console.log('文本被选中了')"></textarea>
    <br>
    <input type="text" onselect="console.log('文本被选中了')">
    <br> 测试 change事件:
    <!-- select 选项 js-onselect文本被选定 -->
    <select onchange="console.log('选项被修改!')">
    <option value="">--请选择您的学历-</option>
    <option value="gz">高中</option>
    <option value="zk">专科</option> 
</select>
    <br> 测试表单的提交和重置事件:
    <form action="" onsubmit="alert('表单提交了')" onreset="alert('表单重置了')">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        </from>
        <br> 测试失去焦点事件:
        <input type="text" onblur="console.log('失去焦点了')">
        <br> 测试获取焦点事件:
        <input type=" text " onfocus="console.log('获取焦点了') ">
        <br> 测试click事件:
        <input type="button" value="click事件 " onclick="console.log('单击') ">
        <br> 测试dblclick事件:
        <input type="button" value="dblclick事件" ondblclick="console.log('双击')">
        <br> 测试keydown事件: <input type="text" onkeydown="console. log('keydown....')" onkeyup="console. log('keyup')">
        <br> 测试keyup事件:
        <input type="text" onkeyup="console.log('keyup...')">

        <br> 测试 mouse相关的时间:
        <div id="mouseDiv" onmouseover="console.log('鼠标经过了')" ; onmousedown="console.log( '鼠标按下了')" ; onmouseout="console.log('鼠标离开了')" ; onmousemove="console.log('鼠标移动了')" </body>

</html>

<script>
    alert("hello world")
</script>